<template>
  <div class="sortview">
    <div class="left">
      <section class="radio" v-for="(item, key) in radioarea" :key="key">
        <input
          type="radio"
          name="sortarea"
          :value="item.val"
          v-model="sortField"
          :id="key"
        />
        <label :for="key">{{ item.name }}</label>
      </section>
      <section class="pricesort" @click="setPriceSort()">
        价格排序
        <i class="arrow up" :class="{ active: sortMethod == 'asc' }"></i>
        <i class="arrow down" :class="{ active: sortMethod == 'desc' }"></i>
      </section>
    </div>
    <div class="right">
      <check-box :val.sync="inventory" :title="'have'">仅显示有货商品</check-box>
      <check-box :val.sync="onlyDiscount" :title="'cheap'">仅显示特惠商品</check-box>
    </div>
  </div>
</template> 

<script>
import CheckBox from "./CheckBox.vue";
export default {
  components: { CheckBox },
  data() {
    return {
      //排序按钮数据
      radioarea: [
        { val: "publishTime", name: "默认排序" },
        { val: "orderNum", name: "最新商品" },
        { val: "price", name: "最高人气" },
        { val: "evaluateNum", name: "评论最多" },
      ],
      //点哪个排序
      sortField: "publishTime",
      sortMethod: "",
      inventory: false, //是否有库存
      onlyDiscount:false,//是否显示特惠
    };
  },

  mounted() {},

  methods: {
    //价格排序区域
    setPriceSort() {
      this.sortField = "";
      if (!this.sortMethod) {
        this.sortMethod = "desc";
      } else {
        this.sortMethod = this.sortMethod == "desc" ? "asc" : "desc";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.sortview {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    & > .radio {
      margin-left: 20px;
      input {
        display: none;
      }
      label {
        display: inline-block;
        width: 98px;
        height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        color: #999;
      }
      input:checked + label {
        background: $xtxColor;
        color: #fff;
        border: none;
      }
    }
  }
  .left {
    display: flex;
    .pricesort {
      position: relative;
      margin-left: 20px;
      display: inline-block;
      width: 98px;
      height: 30px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      color: #999;
      .arrow {
        position: absolute;
        border: 5px solid transparent;
        right: 5px;
      }
      .up {
        top: 4px;
        border-bottom-color: #bbb;
        .active {
          border-bottom-color: $xtxColor;
        }
      }
      .down {
        top: 16px;
        border-top: 5px solid #bbb;
        .active {
          border-top-color: $xtxColor;
        }
      }
    }
  }
}

.active {
  background-color: $xtxColor;
  color: #fff;
  border: none;
}
.right{
    display: flex;
 
}
</style>